<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>每日签到领积分</title>
    <meta content="yes" name="apple-mobile-web-app-capable"><!--可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）-->
    <meta content="yes" name="apple-touch-fullscreen"><!--添加到主屏幕后，全屏显示-->
    <meta content="telephone=no,email=no" name="format-detection"><!--IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--避免IE使用兼容模式-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style"><!--仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body style="background-color: #ffffff;">
<div class="sign-in">
    <header class="header">
        <img src="../images/mine/qiandao@2x.png" alt="">
        <p>第&nbsp;<span>0</span>&nbsp;天</p>
        <div class="integral-total">
            <p>积分&nbsp;<span>6分</span></p>
            <button class="btn-rule">积分规则</button>
        </div>
    </header>
    <div class="date-title">
        <p id="time">2018年8月30日</p>
    </div>
    <div class="sign-header">
        <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
    </div>
    <ul class="sign-list clearfix" id="signList"></ul>
</div>
<!--日历-->
<script type="text/html" id="signListTpl">
    <li><span class="{{className}}">{{date}}</span></li>
</script>
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/template.js"></script>
<script src="../js/index.js"></script>
<script>
    $(function () {
        var monthFirst = 0;//每个月的第一天从哪个方格开始的
        var monthTotalDay = 0; //每个月的总天数
        var today = 0;

        var time = $('#time').text();
        time = time.replace(/[\u4e00-\u9fa5]/g,'-');//替换年月日
        time = time.substring(0,time.length-1);//去掉最后一个"-"
        var timeStamp = new Date(time).getTime();//转换成时间戳
        var myDate = new Date(timeStamp);//转换为中国标准时间
        today = myDate.toDateString().slice(8,10);//获取今天为几号
        monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay();//获取每月从周几开始
        var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0);//获取当前月的最后一天的中国标准时间
        monthTotalDay = d.getDate(); //获取当前月的天数

        //后台返回签到标记：1-签到，0-未签到
        var signMark = [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var className = '';
        for(var i = 0; i < 42; i++) {
            className = '';
            if( i >= monthFirst && i < (monthFirst + monthTotalDay)){
                if(signMark[i-monthFirst] == 1){
                    className = 'sign-day';
                }
                //后台返回具体的签到日期时的判断方法
                /*for (var j = 0;  j < signMark.length; j++){
                    if( signMark[j] == i - monthFirst + 1 ){
                        className = 'sign-day';
                    }
                }*/
                if(today == i - monthFirst + 1){
                    className = 'today';
                }
                var html = template('signListTpl', {
                    className : className,
                    date : i - monthFirst + 1 ,
                });
                $("#signList").append(html);
            }else{
                var html = template('signListTpl', {
                    className : '',
                    date : '' ,
                });
                $("#signList").append(html);
            }
        }
    })
</script>
</body>
</html>